<template>
	<view class="container">
		<yu-calendar :priceList="priceList" bgColor="#3570cc" color="#fff" @click="onClick">
		</yu-calendar>
		<view class="top">
			<view class="l">
				成人
			</view>
			<view class="c">
				￥{{manPrice}}/人
			</view>
			<view class="r">
				<button class="jian" @click="(manCount-=1)" :disabled="manCount==0">
					-
				</button>
				<view class="zhi">
					{{manCount}}
				</view>
				<button class="jia" @click="(manCount+=1)" :disabled="manCount==99">
					+
				</button>
			</view>
		</view>
		<view class="top">
			<view class="l">
				儿童
			</view>
			<view class="c">
				￥{{childPrice}}/人
			</view>
			<view class="r">
				<button class="jian" @click="(childCount-=1)" :disabled="childCount==0">
					-
				</button>
				<view class="zhi">
					{{childCount}}
				</view>
				<button class="jia" @click="(childCount+=1)" :disabled="childCount==99">
					+
				</button>
			</view>
		</view>
		<view class="top">
			<view class="l">
				单房差
			</view>
			<view class="c">
				￥{{onePrice}}/人
			</view>
			<view class="r">
				<button class="jian" @click="(oneCount-=1)" :disabled="oneCount==0">
					-
				</button>
				<view class="zhi">
					{{oneCount}}
				</view>
				<button class="jia" @click="(oneCount+=1)" :disabled="oneCount==99">
					+
				</button>
			</view>
		</view>
		<view class="btn">
			<view class="left">
				<text>总价格</text>
				<text>￥{{getAllPrice}}</text>
			</view>
			<view class="right" @click="ok">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import yuCalendar from "@/components/yu-calendar/yu-calendar.vue"
	import datas from '../../product_calender.js'
	export default {
		data() {
			return {
				priceList: [],
				list: [],
				manPrice: 0,
				childPrice: 0,
				onePrice: 100,
				manCount: 0,
				childCount: 0,
				oneCount: 0,
				id: 0,
			}
		},
		methods: {
			onClick(e) {
				this.manPrice = e.price
				this.childPrice = e.sprice
				this.manCount = 0
				this.childCount = 0
				this.oneCount = 0
				this.id = e.id
			},
			ok() {
				wx.showToast({
					title:`${this.id}价格${this.getAllPrice}`
				})
			}
		},
		computed: {
			getAllPrice() {
				return (this.manPrice * this.manCount + this.childPrice * this.childCount + this.oneCount * this.onePrice)
			}
		},
		created() {
			datas.calender.slice(0, 28).forEach(item => {
				this.priceList.push({
					date: item.date,
					price: item.adult_stock,
					sprice: item.child_stock,
					id: item.id,
				})
			})
		},
		components: {
			yuCalendar
		},
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;

		.top {
			display: flex;
			box-sizing: border-box;
			padding: 0rpx 15rpx;
			line-height: 80rpx;

			.l {
				width: 200rpx;
			}

			.c {
				width: 320rpx;
				color: red;
			}

			.r {
				width: 200rpx;
				display: flex;
				align-items: center;

				.jian {
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					font-size: 36rpx;
					line-height: 40rpx;
				}

				.zhi {
					height: 40rpx;
					width: 120rpx;
					text-align: center;
					line-height: 40rpx;
				}

				.jia {
					height: 40rpx;
					width: 40rpx;
					text-align: center;
					font-size: 36rpx;
					line-height: 40rpx;
				}
			}
		}

		.btn {
			display: flex;
			line-height: 80rpx;

			.left {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				width: 50%;
				padding: 0 12rpx;

				text {
					width: 50%;
				}

				text:nth-child(2) {
					color: red;
				}
			}

			.right {
				width: 50%;
				background-color: red;
				color: white;
				text-align: center;
			}
		}
	}
</style>
